<template>
	<view class="content" style="height:auto!important;">

		<headerinfo></headerinfo>


		<view class="detailPage">


			<view class="leftmain">

				<view class="daozuo">
					<view class="actions" v-if="!isMylife">
						<view class="action-item" @click.stop="$u.throttle(fabulous, 1500)">
							<i class="iconfont" :class="detailData.myLike ? 'iconRed' : ''">&#xec8c;</i>
							<text>{{ detailData.likeCount }}</text>
						</view>
						<view class="action-item">
							<i class="iconfont">&#xe67a;</i>
							<text>{{ detailData.commentCount }}</text>
						</view>
						<view class="action-item" @click.stop="$u.throttle(myFavorite, 1500)">
							<i class="iconfont iconRed" v-if="detailData.myFavorite">&#xe86d;</i>
							<i class="iconfont" v-else>&#xe8ba;</i>
							<text>收藏</text>
						</view>
						<!-- 	<view class="action-item " @click.stop="$u.throttle(showShareDia, 1500)">
							<i class="iconfont">&#xe681;</i>
							<text>分享</text>
						</view> -->

					</view>
				</view>


				<view class="title">
					{{ detailData.title }}
				</view>
				<view class="introduce" style="margin-bottom: 20rpx;">
					<text style="margin-right: 30rpx;">{{ detailData.userRsp.showName }}</text>
					<text>{{ detailData.postTime }}</text>
				</view>

				
				<view class="detailDatacontent" v-if="detailData.content">
					<view  v-if="detailData.htmlArticle">
						<view v-html="detailData.content"></view>
					</view>
					<view v-else>
						<!-- <view class="">{{ detailData.content}}</view> -->
						<rich-text :nodes="detailData.content" class="hh" @itemclick="perview"></rich-text>
					</view>
					
				</view>

				<view class=""  v-if="!detailData.htmlArticle && detailData.images">
					<image style="width: 600px;height: auto;" class="mb-2" @click="previewImage(index)" v-for="(item, index) in detailData.images" :key="index"
						:src="item" mode="widthFix"></image>
				</view>


				<view class="videoBox" v-if="detailData.videos && detailData.videos.length > 0">
					<video id="videoId" :enable-play-gesture="true" :enable-danmu="true" :danmu-list="danmuList"
						style="width: 100%;height: 450px;" :poster="detailData.posterUrl" :src="detailData.videos[0]"
						:autoplay="true"></video>
				</view>


				<view class="containerlist">
					<!-- 评论 -->
					<view class="s-header"><text class="tit"> {{title == '评论'?'家人评论':'网友评论'}}</text></view>

					<view class="bottom">
						<view class="backBox" v-if="backUser.username">
							回复：{{ backUser.username }}
							<span @click="clearBack">取消回复</span>
						</view>
						<view class="flix">
							<view class="input-box">
								<textarea class="input" v-model="commentArticleForm.content" placeholder="点评一下.."
									placeholder-style="color:#adb1b9;" :adjust-position="false"></textarea>
								<text class="confirm-btn" @click="submit">提交</text>
							</view>
						</view>
					</view>
					<view class="evalution" v-if="detailData.comments && detailData.comments.length > 0">
						<view v-for="(item, index) in detailData.comments" :key="index" class="eva-item">
							<image class="touxiang" v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
							<view class="defaultTx" v-else>
								<span>{{ item.username[0] }}</span>
							</view>

							<view class="eva-right">
								<text>{{ item.username }}</text>
								<text class="content">{{ item.content }}</text>
								<span class="date">
									{{ item.dataUpdateTime.substr(5, 11) }}
									<span @click="delcomments(item.docId, index)"
										v-if="username == item.username">删除</span>
									<span @click="callBack(item)">回复</span>
								</span>
								<span class="huifuBox" @click="showHuifuMore(item)"
									v-if="item.children && item.children.length > 0">
									<span>
										{{ item.children.length }} 回复
										<i class="iconfont">&#xe613;</i>
									</span>
								</span>
							</view>
						</view>
					</view>
					<view class="noPinglun" v-else>快来发布第一条评论吧</view>
				</view>


			</view>

			<view class="rightmain">
				<view class="user" v-if="detailData.authorInfo">
					<image :src="detailData.authorInfo.avatar" mode="aspectFill" class="touxiang"></image>
					<view class="name">
						{{detailData.authorInfo.nickname}}
					</view>

					<view class="btn">
						关注
					</view>
				</view>
				<view class="zuoping" v-if="(!shareToAll) && (!systemArticle)">
					<view class="font-lg text-success text-center">
						TA的最新图文作品
					</view>

					<view class="flex align-center flex-wrap">
						<view @click="toInfo(item)" v-for="(item,index) in otherView" :key="index">
							<template>
								<view class="flex flex-column align-center justify-center">
									<view class="text-center">
										{{item.title?item.title:item.content}}
									</view>
									<image class="rounded-circle ml-5" style="width: 200px; height: 200px;"
										:src="item.posterUrl" mode="aspectFill"></image>
								</view>
							</template>

							<!-- <view class="desc">
									<span>{{item.likeCount}} 喜欢</span>
								</view> -->
						</view>
					</view>
				</view>
				<view class="zuoping"  v-if="(!shareToAll) && (!systemArticle)">
					<view class="font-lg text-success text-center">
						TA的最新视频作品
					</view>

					<view class="testxs">
						<!-- @click="toVideoInfo(index)"  -->
						<view class="text-center" v-for="(item,index) in videolist" :key="index">
							<view class="text-center">
								{{item.title?item.title:item.content}}
							</view>
							<video id="videoId" :poster="item.posterUrl" object-fit="cover" @click.stop :enable-play-gesture="true" style="width: 200px; height: 200px;border-radius: 20rpx;"
								:src="item.videos[0]" :autoplay="false"></video>
						</view>
					</view>
				</view>
			</view>
		</view>




		<!--底部分享弹窗-->
		<!-- 	<tui-bottom-popup :show="popupShow" @close="shareClick">
			<view class="tui-share">
				<view class="tui-share-title">分享到</view>
				<scroll-view scroll-x style="padding-right:20upx">
					<view class="tui-share-top">
						<view class="tui-share-item"
							:class="[shareList[0].share.length - 1 === index ? 'tui-item-last' : '']"
							v-for="(item, index) in shareList[0].share" :key="index" @tap="shareClick">
							<view class="tui-share-icon" hover-class="tui-hover" :hover-stay-time="150"><tui-icon
									:name="item.icon" :color="item.color"></tui-icon></view>
							<view class="tui-share-text">{{ item.name }}</view>
						</view>
						<view class="tui-empty">!</view>
					</view>
				</scroll-view>

				<scroll-view scroll-x class="tui-mt">
					<view class="tui-share-bottom">
						<view class="tui-share-item"
							:class="[shareList[1].operate.length - 1 === index ? 'tui-item-last' : '']"
							v-for="(item, index) in shareList[1].operate" :key="index" @tap="shareClick">
							<view class="tui-share-icon" hover-class="tui-hover" :hover-stay-time="150">
								<tui-icon :name="item.icon" color="#404040" :bold="index === 2"></tui-icon>
							</view>
							<view class="tui-share-text">{{ item.name }}</view>
						</view>
					</view>
				</scroll-view>
				<view class="tui-btn-cancle" @tap="shareClick">取消</view>
			</view>
		</tui-bottom-popup> -->
		<!--底部分享弹窗-->

		<!--回复弹窗-->
		<tui-bottom-popup :show="huifuDia" @close="huifuDia = false">
			<view class="backTanBox" v-if="backData.children && backData.children.length > 0">
				<view class="title">
					<i class="iconfont" @click="huifuDia = false">&#xe607;</i>
					{{ backData.children.length }} 条回复
				</view>
				<view class="containerlist" style="border-bottom: 1px solid #efefef;">
					<!-- 评论 -->
					<view class="evalution">
						<view class="eva-item">
							<image class="touxiang" v-if="backData.avatar" :src="backData.avatar" mode="aspectFill">
							</image>
							<view class="defaultTx" v-else>
								<span>{{ backData.username[0] }}</span>
							</view>

							<view class="eva-right">
								<text>{{ backData.username }}</text>
								<text class="content">{{ backData.content }}</text>
								<text class="date">{{ backData.dataUpdateTime.substr(5, 11) }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="mainBox">
					<view class="containerlist">
						<!-- 评论 -->
						<view class="backAllName">全部回复</view>
						<view class="evalution">
							<view v-for="(item, index) in backData.children" :key="index" class="eva-item">
								<image class="touxiang" v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
								<view class="defaultTx" v-else>
									<span>{{ item.username[0] }}</span>
								</view>

								<view class="eva-right">
									<text>{{ item.username }}</text>
									<text class="content">{{ item.content }}</text>
									<text class="date">{{ item.dataUpdateTime.substr(5, 11) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
		<tui-bottom-popup :show="shareDia" @close="shareDia = false">
			<share @closeDia="shareDia = false"></share>
		</tui-bottom-popup>
	</view>
</template>

<script>
	import tuiBottomPopup from '@/components/bottom-popup/bottom-popup';
	import headerinfo from '@/components/headerinfo';
	import tuiIcon from '@/components/icon/icon';
	import share from '@/components/share/share.vue'
	const util = require('@/common/refresh.js');
	export default {
		components: {
			tuiBottomPopup,
			tuiIcon,
			share,
			headerinfo
		},
		data() {
			return {
				isShared: false,
				otherView: [],
				tabBars: [],
				title: '详情',
				keyboardHeight: 0,
				titleStyle: {
					color: '#fff'
				},
				bgColor: '#de4849',
				showHome: '',
				username: uni.getStorageSync('username') ? uni.getStorageSync('username') : '',
				huifuDia: false,
				isMylife: '',
				shareDia: false,
				systemArticle: false,
				shareToAll: false,
				//评论
				commentArticleForm: {
					content: '',
					replyCommentId: '',
					articleId: '',
					lifeId: ''
				},
				articleId: '',
				//详情
				detailData: {
					title: '',
					categoryName: '',
					postTime: '',
					userRsp: {
						username: ''
					},
					location: '',
					htmlArticle: false,
					content: '',
					posterUrl: ''
				},
				danmuList: [],
				backUser: {
					username: ''
				},
				videolist: [],
				toBottom: false,
				backData: {
					children: [],
					username: '',
					content: '',
					dataUpdateTime: '',
					avatar: ''
				},
				videoContext: null,
				evaList: [],
				lifeId: '',
				popupShow: false,
				shareList: [{
						share: [{
								name: '微信',
								icon: 'wechat',
								color: '#80D640'
							},
							{
								name: '支付宝',
								icon: 'alipay',
								color: '#00AAEE'
							},
							{
								name: '新浪微博',
								icon: 'sina',
								color: '#F9C718'
							},
							{
								name: '小程序',
								icon: 'applets',
								color: '#2BA348'
							},
							{
								name: '钉钉',
								icon: 'dingtalk',
								color: '#2DA0F1'
							},
							{
								name: '浏览器打开',
								icon: 'explore-fill',
								color: '#1695F7'
							},
							{
								name: '邮件',
								icon: 'mail-fill',
								color: '#2868E5'
							}
						]
					},
					{
						operate: [{
								name: '投诉',
								icon: 'warning',
								size: 30
							},
							{
								name: '复制链接',
								icon: 'link',
								size: 28
							},
							{
								name: '刷新',
								icon: 'refresh',
								size: 30
							},
							{
								name: '搜索内容',
								icon: 'search-2',
								size: 28
							}
						]
					}
				]
			};
		},
		onUnload() {
			// 页面销毁时移除监听
			uni.offKeyboardHeightChange(()=>{});
		},
		onLoad(e) {
			console.log('看看带过来的参数',e)
			this.getAllCategories();
			// if(this.isString(e)){
			// 	console.log('JSON.parse(e)')
			// 	console.log(JSON.parse(e))
			// }
			if(e.isShared){
				this.isShared = true
				console.log('details this.isShared',this.isShared);
			}
			if (e.type == 1) {
				this.toBottom = true
			}
			if (e.showHome) {
				this.showHome = '1'
			}

			if (e.ispinglun) {
				this.title = '评论'
			}
			if(e.data){
				this.detailData = JSON.parse(decodeURIComponent(e.data))
				console.log('ddddd',this.detailData);
				this.shareToAll = this.detailData.shareToAll?this.detailData.shareToAll:false
				this.systemArticle = this.detailData.systemArticle?this.detailData.systemArticle:false
			}
			
			if (e.isMylife == 1) {
				this.isMylife = 1
				this.commentArticleForm.lifeId = this.lifeId = this.detailData.docId;
				if (!this.detailData.comments) {
					this.detailData.comments = []
				} else {
					if (this.detailData.comments && this.detailData.comments.length > 0) {
						this.detailData.comments = this.$utils.treeDataTranslate2(this.detailData.comments, 'docId',
							'replyCommentId');
					}
					this.detailData = res;
				}
				//查看文章
				// this.viewArticle2();
			} else {
				this.commentArticleForm.articleId = this.articleId = e.id;
				//查看文章
				this.viewArticle();

			}

		},
		onShow() {
			const {
				safeAreaInsets
			} = uni.getSystemInfoSync()
			this.safeAreaInsets = safeAreaInsets


			//  监听键盘高度变化
			uni.onKeyboardHeightChange((res) => {
				// 获取系统信息
				if (res.height) {
					let _sysInfo = uni.getSystemInfoSync()
					let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
					let _diff = res.height - _heightDiff
					this.keyboardHeight = _diff > 0 ? _diff : 0


					//  let deviceBottom= this.safeAreaInsets.bottom;  
					//  this.keyboardHeight = res.height ? (res.height - deviceBottom - deviceBottom) : 0  
				} else {
					this.keyboardHeight = 0
				}
			})
		},

		methods: {
			getVideo() {
				let token = uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
				console.log('getVideo',token,this.detailData.username);
				if (this.detailData.username && token) {
					let username = this.detailData.username
					let query = {
						categoryIds: [],
						pageSize: 4,
						lastDocId: '',
						type: 'video',
						isDraft: false,
						publisher: username
					}
					this.$api.queryArticles(query).then(res => {
						this.videolist = res.list
					})
				}
			},
			toInfo(item) {
				console.log(this.isdraft)
				console.log(this.isMylife)
				if (this.isdraft) {

					let data = encodeURIComponent(JSON.stringify(item))
					if (this.isMylife) {
						console.log(item)

						if (item.htmlArticle) {
							//文章
							uni.navigateTo({
								url: `/pages/create/article?isMylife=1&data=${data}`
							});
						} else {
							if (item.videos && item.videos.length > 0) {
								//视频
								uni.navigateTo({
									url: `/pages/create/video?isMylife=1&data=${data}`
								});
							} else {
								//图文
								uni.navigateTo({
									url: `/pages/create/picture?isMylife=1&data=${data}`
								});
							}
						}
					} else {
						if (item.htmlArticle) {
							//文章
							uni.navigateTo({
								url: `/pages/create/article?data=${data}`
							});
						} else {
							if (item.videos && item.videos.length > 0) {
								//视频
								uni.navigateTo({
									url: `/pages/create/video?data=${data}`
								});
							} else {
								//图文
								uni.navigateTo({
									url: `/pages/create/picture?data=${data}`
								});
							}
						}
					}



				} else {

					if (this.isMylife) {
						let url = 'details';

						let data = encodeURIComponent(JSON.stringify(item))
						uni.navigateTo({
							url: `/pages/news/${url}?data=${data}&isMylife=1&ispinglun=${this.ispinglun}`
						});
					} else {
						let id = item.docId;
						let data = encodeURIComponent(JSON.stringify(item))
						let url = 'details';
						uni.navigateTo({
							url: `/pages/news/${url}?data=${data}&type=${1}&id=${id}&ispinglun=${this.ispinglun}`
						});
					}

				}
			},
			toVideoInfo(index) {
				var now = {}
				let arr = this.videolist.concat()
				for (var i = 0; i < arr.length; i++) {
					if (i == index) {
						now = arr[i] //声明一个对象保存符合要求的数据
						arr.splice(i, 1) //先把符合条件的数据从当前数组中删除
						break;
					}
				}
				arr.unshift(now) //通过unshift函数把符合要求的数据放到第一位
				let data = JSON.stringify(arr)
				console.log(data)
				uni.navigateTo({
					url: '/pages/tabbar/video/videoInfo?data=' + encodeURIComponent(JSON.stringify(arr))
				})
			},
			getOther() {
				let token = uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
				console.log('getOther',token,this.detailData.username);
				if (this.detailData.username && token) {
					let username = this.detailData.username
					let query = {
						categoryIds: [],
						pageSize: 4,
						lastDocId: '',
						type:'image',
						isDraft: false,
						publisher: username
					}
					this.$api.queryArticles(query).then(res => {
						console.log('其他文章信息', res)
						this.otherView = res.list.filter(item => {
							if (item.posterUrl && (!item.videos)) {
								return true
							} else {
								return false
							}
						})
					})
				}
			},
			toHome(index) {
				console.log(index)
				uni.navigateTo({
					url: `/pages/tabbar/index/index?index=${index+1}`
				})
			},
			// 获取导航栏信息
			getAllCategories() {
				let tabBars = []
				this.$api.getAllCategories().then(res => {
					if (res) {
						for (let i in res) {
							tabBars.push({
								name: res[i],
								id: i
							});
						}

						tabBars.unshift({
							name: '全部',
							id: ''
						})
						this.tabBars = tabBars;
					}
				});
			},
			isString(value) {
				return typeof value === 'string';
			},
			// 分享到朋友圈
			onShareTimeline() {
				let that = this
				let id = that.detailData.docId;
				let data = {
					title: that.detailData.title,
					path: `/pages/news/details`,
					imageUrl: that.detailData.posterUrl,
					query: `id=${id}&showHome=1`
				}
				return data
			},

			// 分享给好友
			onShareAppMessage(options) {

				var that = this;
				let id = that.detailData.docId;
				console.log(that.detailData)
				var shareObj = {
					title: that.detailData.title,
					desc: '',
					path: `/pages/news/details?id=${id}&showHome=1`,
					imageUrl: that.detailData.posterUrl,
				}

				return shareObj;
			},
			//收藏
			myFavorite() {
				let data = {
					favorite: true,
					articleId: this.detailData.docId
				};
				if (this.detailData.myFavorite) {
					data.favorite = false;
				}
				this.$api.favoriteUnFavoriteArticle(data).then(res => {
					if (data.favorite) {
						this.$Show.show('收藏成功');
					} else {
						this.$Show.show('取消成功');
					}
					this.detailData.myFavorite = !this.detailData.myFavorite;
					uni.setStorageSync('needRefresh', 1)
				});
			},
			seeVideo(url) {
				console.log(url)
				uni.navigateTo({
					url: `/pages/create/viewVideo?url=${url}`
				})
			},
			//点赞
			fabulous() {
				let data = {
					like: true,
					articleId: this.detailData.docId
				};
				if (this.detailData.myLike) {
					data.like = false;
				}
				this.$api.likeUnlikeArticle(data).then(res => {
					if (data.like) {
						this.$Show.show('点赞成功');
						this.detailData.likeCount++;
					} else {
						this.detailData.likeCount--;
					}
					this.detailData.myLike = !this.detailData.myLike;
					uni.setStorageSync('needRefresh', 1)
				});
			},
			// 播放时进入全屏
			play() {
				this.videoContext = uni.createVideoContext('videoId', this)
				console.log(this.videoContext)
				this.videoContext.requestFullScreen()
			},

			//退出全屏时暂停
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					uni.createVideoContext('videoId', this).pause();
				}
			},
			//退出全屏时停止
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.stop()
				}
			},
			setArticle() {

			},
			viewArticle() {
				const viewArticleFunction = this.isShared ? this.$api.viewSharedArticle : this.$api.viewArticle;
				viewArticleFunction({
						articleId: this.articleId,
						fromWeb: true
					})
					.then(res => {
						console.log(res);

						//把评论转成树形结构
						if (res.comments && res.comments.length > 0) {
							res.comments = this.$utils.treeDataTranslate2(res.comments, 'docId', 'replyCommentId');
						}

						if (res.htmlArticle) {
							//文章的情况下 解决图片超出问题
							const regex = new RegExp('<img', 'gi');
							res.content = res.content.replace(regex, `<img style="max-width: 100%; height: auto"`);
							// res.content = res.content.replace(regex, `<img style="display:none"`);
						}
						this.detailData = res;

						console.log(this.detailData)

						this.getOther()
						this.getVideo()

						this.danmuList = []
						if (this.detailData.comments && this.detailData.comments.length > 0) {
							this.detailData.comments.forEach((item, index) => {
								this.danmuList.push({
									text: item.content,
									time: index + 1
								})
							})
						}
						// console.log(this.detailData);
					});
			},

			delcomments(commentId, index) {
				if (this.isMylife) {
					let data = {
						lifeId: this.lifeId,
						commentId
					};

					this.$api.deleteLifeComment(data).then(res => {
						this.$Show.show('删除成功');
						this.detailData.comments.splice(index, 1);
					});
				} else {
					let data = {
						articleId: this.articleId,
						commentId
					};

					console.log(index);
					this.$api.deleteComment(data).then(res => {
						this.$Show.show('删除成功');
						this.detailData.comments.splice(index, 1);
						uni.setStorageSync('needRefresh', 1)
					});
				}

			},
			//回复评论
			callBack(item) {
				console.log(item);
				this.backUser = item;
				this.commentArticleForm.replyCommentId = item.docId;
			},
			showHuifuMore(data) {
				this.backData = data;
				this.huifuDia = true;
			},

			async shareClick() {
				this.popupShow = !this.popupShow;
			},
			submit: util.throttle(function() {
				if (this.commentArticleForm.content == '') {
					return this.$Show.show('输入点信息吧。');
				}

				if (this.isMylife == 1) {
					this.$api.commentLife(this.commentArticleForm).then(res => {
						this.setComment(res)
					});
				} else {
					this.$api.commentArticle(this.commentArticleForm).then(res => {
						this.setComment(res)

					});
				}
			}),
			setComment(res) {
				this.$Show.show('评论成功');
				this.commentArticleForm.content = '';
				this.commentArticleForm.replyCommentId = '';
				// this.commentArticleForm.lifeId = '';
				this.backUser = {};
				console.log(this.detailData)
				if (this.articleId) {
					this.viewArticle();
				} else {
					this.detailData.comments.push(res)
					this.detailData.comments = this.$utils.treeDataTranslate2(this.detailData.comments, 'docId',
						'replyCommentId');
				}

				// this.detailData.comments.push(res)
				uni.setStorageSync('needRefresh', 1)
			},
			showShareDia() {
				this.shareDia = true
			},
			clearBack() {
				this.commentArticleForm.replyCommentId = '';
				this.backUser = {};
			},
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.detailData.images
				});
			},
			perview(e) {
				console.log('123')
				let contentimg = e.detail.node.attrs.src
				console.log(contentimg)

				uni.previewImage({
					current: 0,
					urls: [contentimg]
				});
			}
		}
	};
</script>

<style lang="scss">
	@import './detail.scss';

	page {
		height: 100%;
	}

	//解决数字内容太多不换行的问题
	.hh {
		word-break: break-all;
		white-space: pre-warp;
	}

	.content {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: #fff;
	}

	.video-wrapper {
		height: 422upx;

		.video {
			width: 100%;
			height: 100%;
		}
	}

	.scroll {
		flex: 1;
		position: relative;
		background-color: #f8f8f8;
		height: 0;
	}

	.scroll-content {
		display: flex;
		flex-direction: column;
	}

	.huifuBox {
		margin-top: 20rpx;
		display: inherit;

		span {
			display: flex;
			align-items: center;
			padding: 3px 10px;
			border-radius: 20px;
			background-color: #f8f8f8;
			font-size: 24rpx;

			.iconfont {
				font-size: 22rpx;
				margin-left: 3px;
				transform: translateY(1px);
			}
		}
	}

	/* 简介 */
	.introduce-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		line-height: 1.5;

		.title {
			font-size: 36upx;
			color: #303133;
			margin-bottom: 16upx;
		}

		.introduce {
			display: flex;
			font-size: 26upx;
			color: #909399;

			text {
				margin-right: 16upx;
			}
		}
	}

	/* 点赞等操作 */
	.actions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1.3;
		padding: 20rpx 40rpx;

		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 24upx;
			color: #999;
		}

		.iconRed {
			color: #de4849;
		}

		.yticon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 52upx;

			&.reverse {
				position: relative;
				top: 6upx;
				transform: scaleY(-1);
			}

			&.active {
				color: #ec706b;
			}
		}

		.icon-fenxiang2 {
			font-weight: bold;
			font-size: 36upx;
		}

		.icon-shoucang {
			font-size: 44upx;
		}
	}

	.s-header {
		padding: 20upx 0;
		font-size: 32upx;
		color: #303133;
		background: #fff;
		margin-top: 16upx;

		&:before {
			content: '';
			width: 0;
			height: 40upx;
			margin-right: 24upx;
			border-left: 6upx solid #de4849;
		}
	}

	/* 推荐列表 */
	.rec-section {
		background-color: #fff;

		.rec-item {
			display: flex;
			padding: 20upx 30upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				left: 30upx;
				right: 0;
				bottom: 0;
				height: 0;
				border-bottom: 1px solid #eee;
				transform: scaleY(50%);
			}
		}

		.left {
			flex: 1;
			padding-right: 10upx;
			overflow: hidden;
			position: relative;
			padding-bottom: 52upx;

			.title {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: 32upx;
				color: #303133;
				line-height: 44upx;
			}

			.bot {
				position: absolute;
				left: 0;
				bottom: 4upx;
				font-size: 26upx;
				color: #909399;
			}

			.time {
				margin-left: 20upx;
			}
		}

		.right {
			width: 220upx;
			height: 140upx;
			flex-shrink: 0;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.noPinglun {
		min-height: 300rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #8b8686;
	}

	.backAllName {
		padding: 0 30rpx;
		padding-top: 20rpx;
		font-size: 34rpx;
	}

	/* 评论 */
	.evalution {
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 20upx 0;

		.defaultTx {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			border: 1px solid #e3d803;
			background-color: #e3d803;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
		}
	}

	.eva-item {
		display: flex;
		padding: 20upx 30upx;
		position: relative;

		image {
			width: 60upx;
			height: 60upx;
			border-radius: 50px;
			flex-shrink: 0;
			margin-right: 24upx;
		}

		&:after {
			content: '';
			position: absolute;
			left: 30upx;
			bottom: 0;
			right: 0;
			height: 0;
			border-bottom: 1px solid #eee;
			transform: translateY(50%);
		}

		&:last-child:after {
			border: 0;
		}
	}

	.eva-right {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: 26upx;
		color: #909399;
		position: relative;

		.content {
			font-size: 32upx;
			color: #333;
			padding-top: 20upx;
		}

		.date {
			margin-top: 20rpx;

			span {
				margin-left: 20rpx;
			}
		}
	}

	.detailDatacontent {
		margin-top: 20rpx;

		.images {
			margin-top: 20rpx;

			image {
				width: 100%;
			}

			.posterUrl {
				width: 100%;
			}
		}
	}

	/* 底部 */
	.bottom {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
		bottom: 0;
		z-index: 1;
		height: auto;
		width: 100%;
		background-color: #fff;
		z-index: 10;
		padding: 20rpx 20rpx;

		flex-direction: column;

		.flix {
			width: 100%;
			display: flex;
			align-items: center;
		}

		.backBox {
			width: 100%;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #9d9d9d;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;

			span {
				margin-left: 30rpx;
			}
		}

		.input-box {
			display: flex;
			align-items: center;
			flex: 1;
			height: 200upx;
			background: #f2f3f3;
			border-radius: 20rpx;
			padding: 15rpx;
			position: relative;

			.icon-huifu {
				font-size: 28upx;
				color: #909399;
			}

			.input {
				padding: 0 20upx;
				font-size: 28upx;
				color: #303133;
				height: 100%;
				width: 100%;

			}
		}

		.confirm-btn {
			font-size: 30upx;
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
			background-color: #de4849;
			color: #fff;
			width: 150rpx;
			height: 70rpx;
			z-index: 100;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			cursor: pointer;
			padding-left: 0;
		}
	}

	.backTanBox {
		height: 90vh;
		width: 100%;
		overflow-y: scroll;

		.title {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #e7e7e7;
			position: relative;
			font-size: 32rpx;

			.iconfont {
				position: absolute;
				left: 30rpx;
			}
		}
	}

	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	/*header*/
	.tui-header {
		width: 100%;
		padding-top: 34upx;
		/* box-shadow: 0 15upx 10upx -15upx #f2f2f2; */
		box-sizing: border-box;
		background: #fff;
		position: fixed;
		z-index: 1000;
	}

	.tui-header-top,
	.tui-header-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26upx;
		color: #333;
	}

	.tui-top-item {
		height: 26upx;
		line-height: 26upx;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-topitem-active {
		position: relative;
		font-weight: bold;

	}

	.videoBox {
		position: relative;

		.mark {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 10;
		}

		.bofang {
			position: absolute;
			width: 100rpx;
			left: 50%;
			opacity: .8;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 10;
		}

		.iconfont {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 11;
			color: #fff;
			font-size: 80rpx;
		}

		.fenmian {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.tui-topitem-active::after {
		content: '';
		position: absolute;
		width: 44upx;
		height: 6upx;
		background: #5677fc;
		border-radius: 6upx;
		bottom: -10upx;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.tui-price-arrow {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 20upx;
	}

	.tui-bottom-item .tui-icon-class,
	.tui-screen .tui-icon-class {
		margin-left: 6upx;
	}

	.tui-icon-box {
		line-height: 12px !important;
		padding: 0 !important;
		display: block !important;
		position: relative;
	}

	.tui-arrow-up {
		top: 5px;
	}

	.tui-arrow-down {
		top: -3px;
	}

	.tui-header-bottom {
		margin-top: 56upx;
		height: 108upx;
		padding: 0 30upx;
		box-sizing: border-box;
		font-size: 24upx;
		align-items: flex-start;
		overflow: hidden;
	}

	.tui-bottom-text {
		line-height: 24upx;
	}

	.tui-bottom-item {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 18upx 12upx;
		border-radius: 40upx;
		box-sizing: border-box;
		background: #f2f2f2;
		margin-right: 20upx;
		white-space: nowrap;
	}

	.tui-bottom-item:last-child {
		margin-right: 0;
	}

	.tui-btmItem-active {
		padding-bottom: 60upx;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-active {
		color: #5677fc;
	}

	.tui-ml {
		margin-left: 6upx;
	}

	.tui-seizeaseat-20 {
		height: 20upx;
	}

	.tui-seizeaseat-30 {
		height: 30upx;
	}

	.tui-middle {
		vertical-align: middle;
	}

	.tui-drop-item .tui-icon-class {
		vertical-align: middle;
	}

	/*header*/

	/*header 下拉选择*/

	.tui-scroll-box {
		width: 100%;
		height: 480upx;
		box-sizing: border-box;
		position: relative;
		z-index: 99;
		color: #fff;
		font-size: 30upx;
		word-break: break-all;
	}

	.tui-drop-item {
		color: #333;
		height: 80upx;
		font-size: 28upx;
		padding: 20upx 40upx 20upx 40upx;
		box-sizing: border-box;
		display: inline-block;
		width: 50%;
	}

	.tui-drop-btnbox {
		width: 100%;
		height: 100upx;
		position: absolute;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		display: flex;
	}

	.tui-drop-btn {
		width: 50% !important;
		border-radius: 0 !important;
		font-size: 32upx !important;
		text-align: center;
		height: 100upx;
		line-height: 100upx;
		border: 0;
	}

	.tui-btn-white {
		border-radius: 0;
	}

	/*header 下拉选择*/

	.top-dropdown {
		margin-top: 360upx;
		padding: 0 40upx;
		box-sizing: border-box;
	}

	.tui-share-box {
		padding: 0 50upx;
		box-sizing: border-box;
	}

	.tui-drop-input-box {
		padding: 50upx;
		box-sizing: border-box;
	}

	.tui-animation {
		display: inline-block;
		transform: rotate(0deg);
		transition: all 0.2s;
	}

	.tui-animation-show {
		transform: rotate(180deg);
	}

	.tui-selected-list {
		background: #fff;
		border-radius: 20upx;
		overflow: hidden;
		transform: translateZ(0);
	}

	.tui-dropdown-scroll {
		height: 400upx;
	}

	.tui-cell-class {
		display: flex;
		align-items: center;
		padding: 26upx 30upx !important;
	}

	.tui-ml-20 {
		margin-left: 20upx;
	}

	.tui-share {
		background: #e8e8e8;
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-share-title {
		font-size: 26upx;
		color: #7e7e7e;
		text-align: center;
		line-height: 26upx;
		padding: 20upx 0 50upx 0;
	}

	.tui-share-top,
	.tui-share-bottom {
		min-width: 101%;
		padding: 0 20upx 0 30upx;
		white-space: nowrap;
	}

	.tui-mt {
		padding-bottom: 150upx;
	}

	.tui-share-item {
		width: 126upx;
		display: inline-block;
		margin-right: 24upx;
		text-align: center;
	}

	.tui-item-last {
		margin: 0;
	}

	.tui-empty {
		display: inline-block;
		width: 30upx;
		visibility: hidden;
	}

	.tui-share-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fafafa;
		height: 126upx;
		width: 126upx;
		border-radius: 32upx;
	}

	.tui-share-text {
		font-size: 24upx;
		color: #7e7e7e;
		line-height: 24upx;
		padding: 20upx 0;
		white-space: nowrap;
	}

	.tui-btn-cancle {
		width: 100%;
		height: 100upx;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #f6f6f6;
		font-size: 36upx;
		color: #3e3e3e;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-hover {
		background: rgba(0, 0, 0, 0.2);
	}


	/* 评论 */
	.evalution {
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 20upx 0;

		.defaultTx {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			border: 1px solid #e3d803;
			background-color: #e3d803;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
		}
	}

	.search {
		display: flex;
		align-items: center;

		.notice {
			font-size: 28rpx;
			position: relative;

			.iconfont {
				margin-right: 4px;
			}
		}
	}


	.hedaer {
		padding: 0 30px;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.inputs {
			display: flex;
			align-items: center;
			background-color: #f8f8f8;
			padding: 6px 10px;
			border-radius: 4px;
			margin-right: 30px;

			input {
				width: 300px;
			}

			span {
				color: #f22d2d;
				font-size: 28rpx;
				width: 50px;
				cursor: pointer;

				.iconfont {
					margin-right: 4px;
					font-size: 28rpx;
				}
			}
		}

		.logo {
			display: flex;
			align-items: center;

			image {
				width: 100px;
				height: auto;
				margin-right: 30px;
			}

			.list {
				display: flex;

				.li {
					font-size: 30rpx;
					margin-right: 20px;
					cursor: pointer;
				}
			}
		}
	}
</style>